import React, { ReactElement } from 'react';
import { View, Text, Image } from 'react-native';
import { Surface, Shape, Path } from '@react-native-community/art';

import styles from './style';
import Button from '../../../../../../../../components/Button';
import { onPressSpu } from '../../../../actions';
import { moneySymbol } from '../../../../../../../../util/adaptIOS';
import { ROW_SHADOW_OPTIONS } from '../../../../../../../../constant/shadow';
import { headPlace, spuTag } from '../../../../../../../../constant/resource';
import { phonePx } from '../../../../../../../../util/adapt';
import { getStrCharCodeLength } from '../../../../../../../../util/string';
import { APP_YELLOW } from '../../../../../../../../constant/color';
import { DiscoveryCommodity } from '../../../../types.d';
import { pointToYuan } from '../../../../../../../../util/transformMoney';
import CustomText from '../../../../../../../../components/Text';

export default (props: DiscoveryCommodity): ReactElement => {
  const { name, startTime, duration, price, teachers, soldNum } = props;
  const tag = '初中';
  const shapeLength = getStrCharCodeLength(tag) * phonePx(9) + phonePx(15);

  const polygonPath = new Path()
    .moveTo(0, 0)
    .lineTo(shapeLength, 0)
    .lineTo(shapeLength - phonePx(5), phonePx(16))
    .lineTo(0, phonePx(16))
    .close();

  return (
    <Button
      needSVGShadow
      shadowStyle={styles.shadow}
      shadowOptions={ROW_SHADOW_OPTIONS}
      style={styles.container}
      onPress={(): void => {
        onPressSpu(props);
      }}
    >
      <View style={styles.loadTag}>
        <View style={styles.line1} />
        <View style={styles.line2} />
        <View style={styles.tag}>
          <Surface width={shapeLength} height={phonePx(16)}>
            <Shape
              d={polygonPath}
              fill={APP_YELLOW}
              strokeJoin="round"
              strokeCap="round"
            />
          </Surface>
          <CustomText style={styles.tagDesc} numberOfLines={1}>
            初中
          </CustomText>
        </View>
      </View>

      <CustomText style={styles.name} numberOfLines={1}>
        {name}
      </CustomText>
      <CustomText style={styles.time}>
        开课时间：{startTime} {duration}课时
      </CustomText>

      <View style={styles.loadBottomInfo}>
        <View style={styles.teacherContent}>
          {teachers.slice(0, 5).map(
            (item): ReactElement => (
              <View style={styles.teacher} key={item.id}>
                <Image
                  style={styles.teacherIcon}
                  source={{ uri: item.headUrl }}
                  defaultSource={headPlace}
                />
                <CustomText style={styles.teacherName}>{item.name}</CustomText>
              </View>
            )
          )}
        </View>
        <View style={styles.info}>
          {price > 0 ? (
            <CustomText style={styles.price}>
              <Text style={styles.symbol}>{moneySymbol()}</Text>
              {pointToYuan(price)}
            </CustomText>
          ) : (
            <CustomText style={styles.price}>免费</CustomText>
          )}
          <CustomText style={styles.num}>
            已有{soldNum}人{price > 0 ? '购买' : '领取'}
          </CustomText>
        </View>
      </View>
    </Button>
  );
};
